<template>
  <div class="one_mypost_main">
    <div class="row block center pt-3 pl-2 ml-1 border-bottom pb-3"
         style="background-color:rgba(255,255,255,0)">
      <div class="pt-1 pl-4">
        <el-page-header @back="goBack">
        </el-page-header>
      </div>
    </div>
    <div class="pt-4 pr-5 pb-3">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="form" status-icon >

        <el-form-item label="帖子标题" :label-width="formLabelWidth" prop="post_title">
          <el-input v-model="form.post_title"
                    type="text"
                    maxlength="50"
                    autocomplete="off"
                    show-word-limit
                    placeholder="请输入帖子标题，3-50个字符...">
          </el-input>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="帖子类别" :label-width="formLabelWidth" prop="post_category">
              <el-select  placeholder="选择帖子类别..." v-model="form.post_category">
                <el-option v-for="(category) in category" :label="category.label" :value="category.id" :key="category.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="帖子标签" :label-width="formLabelWidth" prop="post_label">
              <el-input v-model="form.post_label"
                        type="text"
                        maxlength="20"
                        autocomplete="off"
                        show-word-limit
                        placeholder="请输入帖子标签，3-20个字符...">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-form-item label="帖子内容" :label-width="formLabelWidth" prop="post_content">
          <el-input
              show-word-limit
              type="textarea"
              maxlength="2000"
              :rows="30"
              placeholder="请输入内容，1-2000个字符"
              v-model="form.post_content">
          </el-input>
        </el-form-item>

        <el-form-item>
          <div class="ml-4">
            <el-button type="primary" @click="submitForm('form')">修 改</el-button>
            <el-button @click="resetForm('form')">重 置</el-button>
          </div>
        </el-form-item>

      </el-form>
    </div>



  </div>
</template>

<script>
import {getPostInfoByPostID,updatePost} from '@/api/Discussion'

export default {
name: "one_mypost",
  data(){
    return{
      //弹窗 编辑帖子
      dialogFormVisible: false,
      post_id:this.$route.query.post_id,
      form: {
        post_id:'',
        post_title:'',
        post_content:'',
        post_category:'',
        post_label:'',
        post_img:'',
        // post_ctr:'',
        // post_like:''
      },
      //表单校验规则
      rules: {
        post_title: [
          { required: true, message: '请输入帖子标题', trigger: 'blur'},
          { min:3, max: 20, message: '长度在 3 到 50 个字符', trigger: 'blur'}
        ],
        post_label: [
          { message: '请输入帖子标签', trigger: 'blur'},
          { min:1, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        post_category: [
          { required: true, message: '请选择帖子类别', trigger: 'change'}
        ],
        post_content: [
          { required: true, message: '请输入帖子内容', trigger: 'blur'},
          { min:1, max: 2000, message: '长度在 1 到 2000 个字符', trigger: 'blur'}
        ]

      },
      formLabelWidth: '120px',
      category:[
        {
          id:'1',
          label:'求助问答',
          value:1
        },
        {
          id:'2',
          label:'学长学姐经验贴',
          value:2
        },
        {
          id:'3',
          label:'日常生活',
          value:3
        },
        {
          id:'4',
          label:'其他',
          value:4
        },

      ],

    }
  },
  methods:{
    //获取帖子内容
    init(){


      getPostInfoByPostID({
        post_id:this.$route.query.post_id
      }).then(res=>{
        this.form.post_id=res.data.post_id;
        this.form.post_title=res.data.post_title;
        this.form.post_content=res.data.post_content;
        this.form.post_label=res.data.post_label;
        this.form.user_id=res.data.user_id;
        this.form.post_img=res.data.post_img;
        // this.form.post_category=res.data['post_category'];

        if(res.data.post_category==1){
          this.form.post_category="求助问答";

        }else if(res.data.post_category==2){
          this.form.post_category="学长学姐经验贴";

        }else if(res.data.post_category==3){
          this.form.post_category="日常生活";

        }else if(res.data.post_category==4){
          this.form.post_category="其他";
        }
      })





    },
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    //修改帖子信息
    updateSave()
    {

      updatePost({
        form:this.form,
        post_id:this.form.post_id,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{

        if(res.data.code===1)
        {
          this.$msg.success("成功修改！");
          this.init();
        }
        else
        {
          this.$msg.error("修改失败！");
        }

        if(this.form.post_category==1){
          this.form.post_category="求助问答";

        }else if(this.form.post_category==2){
          this.form.post_category="学长学姐经验贴";

        }else if(this.form.post_category==3){
          this.form.post_category="日常生活";

        }else if(this.form.post_category==4){
          this.form.post_category="其他";
        }
      })


    },
    //修改
    submitForm(formName) {

      if(this.form.post_category==="求助问答"){
        this.form.post_category=1;

      }else if(this.form.post_category==="学长学姐经验贴"){
        this.form.post_category=2;

      }else if(this.form.post_category==="日常生活"){
        this.form.post_category=3;

      }else if( this.form.post_category==="其他"){
        this.form.post_category=4;
      }

      // alert(this.form.post_category)
      //验证
      this.$refs[formName].validate((valid) => {
        if (valid) {

          //再次确认
          this.$confirm('确认修改?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.updateSave();

          }).catch(() => {
            this.$msg.error("取消修改！");
          });

        } else {
          this.$msg.error("修改失败！");
          return false;
        }
      });


    },
    //  清空发布的弹窗的内容 重置
    resetForm(formName) {

      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs[formName].resetFields();
      });

    },



  },
  created() {
    let _this=this;
    _this.init();

  },
  mounted() {


  }
}
</script>

<style scoped>

</style>
